<template>
  <div class="request-party-service-manage">
    <div class="app-container">
      <div class="mainbox">
        <Header :header-name="$route.meta.title" />

        <div class="request-party-service-manage-body">

          <!-- 搜索板块 -->
          <GetPageForm
            ref="GetPageFormRef"
            :form-data="formData"
            :ids="ids"
            :add-but="ADD"
            :delete-button="deleteButton"
            @getTableData="getTableData"
            @resetBtn="resetBtn"
            @addBtn="addBtn"
          />
          <!-- 表格数据视图 -->
          <div>
            <FlexTable
              v-loading="loading"
              border
              :data="tableData"
              :columns="columnsOptions"
              @selection-change="handleSelectionChange"
            />
            <el-pagination
              :page-size="pagination.pageSize"
              :current-page.sync="pagination.pageNo"
              layout="prev, pager, next, jumper"
              :total="pagination.totalPage"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>

        <!-- 添加或修改服务器监测对话框 -->
        <AddEditService
          ref="addEditServiceRef"
          @getList="getTableData"
          @changeType="changeType"
        />
        <monitor-log ref="monitorLog" />
      </div>
    </div>
  </div>
</template>

<script>
import { serviceWatchPage, serviceWatchDetail, changeTaskStatus } from '@/api/serviceWatch'
import { editRes } from '@/utils/editAlarmUser'
import { downloadTemplateService, exportAllService, ServiceExport, ServiceUpload } from '@/api/serviceWatch'
import AddEditService from '@/views/stateWatch/components/addEditService.vue'
import MonitorLog from '@/views/serviceMonitor/monitorLog.vue'
import GetPageForm from '@/components/GetPageForm/index.vue'

export default {
  name: 'ServiceWatch',
  components: {
    GetPageForm,
    MonitorLog,
    AddEditService
  },
  data () {
    return {
      ADD: 'SERVICEWATCH_ADD_BUTTON', // 新增
      deleteButton: 'SERVICEWATCH_DELETE_BUTTON', // 删除
      ids: [],
      formData: {
        list: [
          {
            model: 'serverName',
            type: 'input',
            placeholder: '服务器名称'
          },
          {
            model: 'ip',
            type: 'input',
            placeholder: '服务器IP'
          }
        ],
        deleteAddress: '/interfaceServerMonitor/delete',
        method: 'post',
        downloadTemplateService,
        exportAllService,
        ServiceExport,
        ServiceUpload

      },
      dialogVisible: false,
      form: {},
      loading: false,
      tableData: [],
      columnsOptions: [
        { type: 'selection' },
        { label: '服务器名称', prop: 'serverName' },
        { label: '服务器IP', prop: 'ip' },
        { label: '当前状态', prop: 'status',
          customRender: (scope) => {
            let tag
            if (scope.row.status === '1') {
              tag = <span>正常</span>
            } else if (scope.row.status === '0') {
              tag = <span>异常</span>
            }
            return tag
          }
        },
        { label: '备注', prop: 'remarks' },
        { label: '操作', width: 200,
          customRender: (scope) => {
            return [
              <el-button vPermission={['SERVICEWATCH_STARTSTOP_BUTTON']} type='text' onClick={() => this.changeType(scope.row)}> {scope.row.taskStatus === '1' ? '停止' : '启用'} </el-button>,
              <el-button vPermission={['SERVICEWATCH_SHOW_BUTTON']} type='text' onClick={() => this.show(scope.row)}> 连接详情 </el-button>,
              <el-button vPermission={['SERVICEWATCH_EDIT_BUTTON']} type='text' onClick={() => this.edit(scope.row.id)}> 编辑 </el-button>,
              <el-button vPermission={['SERVICEWATCH_DELETE_BUTTON']} type='text' class='text-del-btn' onClick={() => this.delBtn(scope.row.id)}> 删除 </el-button>
            ]
          }
        }
      ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalPage: null
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    changeType(val) {
      const data = {
        ids: [val.id],
        type: '4',
        taskStatus: val.taskStatus === '1' ? '2' : '1'
      }
      changeTaskStatus(data).then(res => {
        if (res.data === true) {
          this.$message.success(data.taskStatus === '1' ? '启用成功' : '停用成功')
          this.getTableData()
        } else {
          this.$message.success(data.taskStatus === '1' ? '启用失败' : '停用失败')
        }
      })
    },
    show(detail) {
      // this.row=detail;
      // this.open=true;
      // this.title="数据源信息详情";
      // this.operate='detail';
      // this.showDetail=false;
      this.$refs.monitorLog.init(detail.id, 4, detail.serverName, detail.ip)
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNo = val
      this.getTableData()
    },
    getTableData(form) {
      this.setLoading(true)
      const params = {
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize,
        ...form
      }
      serviceWatchPage(params).then(res => {
        const { code, data } = res
        if (code === '00000') {
          this.tableData = data.rows
          this.pagination.totalPage = data.totalRows
        } else {
          this.showMessage('error', '无法获取表单数据')
        }
      }).finally(() => {
        this.setLoading(false)
      })
    },
    resetBtn() {
      this.form = {}
      Object.assign(this.pagination, {
        pageNo: 1,
        pageSize: 10,
        totalPage: 0
      })
      this.getTableData()
    },
    async addBtn() {
      this.$refs.addEditServiceRef.open = true
      this.$refs.addEditServiceRef.row = {
        serverName: null,
        ip: null,
        systemId: null,
        manageType: null,
        cron: null,
        otherParams: null,
        remarks: null,
        taskStatus: '1'
      }
      await this.$nextTick()
      this.$refs.addEditServiceRef.$refs.form.clearValidate()
    },
    edit(detail) {
      serviceWatchDetail({ id: detail }).then(res => {
        const data = res.data
        this.$refs.addEditServiceRef.open = true
        data.alarmUsers = editRes(res.data.alarmUsers)
        this.$refs.addEditServiceRef.row = data
      })
    },
    delBtn(detail) {
      this.ids = [detail]
      this.$refs.GetPageFormRef.deleteBtn()
    },
    handleSelectionChange(val) {
      this.ids = []
      this.ids = val.map(item => item.id)
      console.log(this.ids)
    },
    setLoading(loading) {
      this.loading = loading
    }

  }
}
</script>

<style lang="scss" scoped>
.request-party-service-manage {
  background: #F2F2F2;

  &-body {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100vh - 254px);
    overflow-y: auto;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }

  .el-tree {
    ::v-deep .el-tree-node__expand-icon {
      font-size: 18px;
    }
    .custom-tree-node {
      width: calc(100% - 30px);
      display: flex;
      align-items: center;
      padding-right: 20px;

      > span:first-child {
        display: inline-block;
        width: calc(100% - 50px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 40px;
      }

      .tree-btn {
        .el-switch {
          margin-top: -4px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>

